<template>
	<div
		class="product"
		:style="{
			borderColor: active ? '#5f88ff' : 'transparent',
			backgroundColor: active ? '#f4f9ff' : '#FFF'
		}"
	>
		<div
			class="product__img"
			:style="{ backgroundImage: `url(${productImg})` }"
		/>

		<div class="product__main" style="overflow: hidden">
			<div class="name">{{ name }}</div>
			<div class="product__main__guarantee">
				<div
					class="product__main__guarantee__item"
					v-for="detail in guarantees
						.map((g) => g.detail)
						.filter((d) => d)
						.flat()
						.slice(0, 2)"
				>
					<span class="product__main__guarantee__label">{{
						detail.protection
					}}</span>
					<span
						class="product__main__guarantee__value"
						:title="detail.coverage"
						>{{ detail.coverage }}</span
					>
				</div>
			</div>
		</div>
		<!-- <div class="product__content">
			<div
				class="coverage"
				v-for="detail in guarantees
					.map((g) => g.detail)
					.filter((d) => d)
					.flat()
					.slice(0, 4)"
			>
				<span>{{ detail.protection }}</span>
				<span class="cost">{{ detail.coverage }}</span>
			</div>
			<span> </span>
		</div>
		<div class="product__footer">
			<div class="cost">
				￥<span>{{ minPremium }}</span> 起
			</div>
		
		</div> -->
	</div>
</template>

<script>
export default {
	props: {
		name: String,
		productImg: String,
		occupationFile: String,
		guarantees: Array,
		active: Boolean //是否被选中
	},
	data() {
		return {}
	},
	computed: {
		minPremium() {
			return Math.min(...this.guarantees.map((g) => g.premium * 1))
		}
	},
	mounted() {},
	methods: {},
	components: {}
}
</script>

<style lang="scss" scoped="scoped">
.product {
	height: 120px;
	width: 390px;
	box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.15);
	border-radius: 12px;
	padding: 9px;
	border: 3px solid transparent;
	box-sizing: border-box;
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	vertical-align: top;

	&__img {
		height: 100%;
		display: block;
		width: 76px;
		float: left;
		object-fit: cover;
		object-position: center;
		border-radius: 9px;
		margin-right: 9px;
		background-position: center;
		background-size: cover;
		background-color: #f7f7f7;
	}

	&__main {
		.name {
			font-size: 14px;
			font-weight: 600;
			color: #323232;
		}

		&__guarantee {
			// display: grid;
			// grid-template-columns: 1fr 1fr;
			font-size: 14px;
			margin-top: 12px;

			&__item {
				display: grid;
				grid-template-columns: auto 1fr;
			}
			&__label {
				color: #999;
				white-space: nowrap;
			}
			&__value {
				text-align: right;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
}
</style>
